<template>
	<view class="content">
		<view class="header">
			<view class="goBack" @click="goBack()">
				<image src="../../static/img/back.png" mode="" style="width: 13rpx; height: 23rpx;"></image>
			</view>
			<view class="input_box">
				<input type="text" v-model="search" @confirm="searchData(search)" placeholder="请输入名称或首字母查询"
					placeholder-style="font-size:26rpx;color:#999;" />
				<uni-icons class="search_icon" type="search" color="#999" size="18"></uni-icons>
			</view>
		</view>
		<view class="nowCity" v-if="!isSearch">
			<view class="now_city_title">
				当前定位
			</view>
			<view class="now_city_content" @click="goHome">
				{{cityObj.city}}
			</view>
		</view>
		<view class="heatCity" v-if="!isSearch">
			<view class="now_city_title">
				热门城市
			</view>
			<view class="now_city_content">
				<text v-for="item in hotCity" :key="item.id" @click="getCity(item)">{{item.city}}</text>
				
			</view>
		</view>
		<view class="allCity" v-if="!isSearch">
			<view class="now_city_title">
				全部城市
			</view>
			 <a-indexed-list  :list="list" :fileds="['city', 'city']"  @onSelect="select"></a-indexed-list>
			<!-- <uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list> -->
			<!-- <view class="city_content">
				<view class="city_list">
					<scroll-view style="height: 732rpx;overflow: auto;" :scroll-top="scrollTop" scroll-y="true"
						class="scroll-Y" @scroll="scroll">
						<block v-for="(item,index) in list" :key="index">
							<view class="city_item" style="color: #999999;">
								<text>{{item.initial}}</text>

							</view>
							<view class="city_item" v-for="(city,i) in item.list" :key="city.code" @click="getCity(city)">

								<text>{{city.city}}</text>
							</view>
						</block>
					</scroll-view>

				</view>
				<view class="city_firt_name">
					<text v-for="(item,index) in firstName" :key="index" @click="getIndex(index)">{{item}}</text>
				</view>
			</view> -->
		</view>
		<view class="allCity" v-if="isSearch">
			<view class="now_city_title">
				搜索的结果
			</view>
			<view class="city_content">
			<view class="city_list">
				
				<view class="city_item" v-for="(city,i) in list" :key="city.code" @click="getCity(city)">
				
					<text>{{city.city}}</text>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import City from "../../static/js/cityCopy.js"
	import PinyinUtils from '../../static/js/pingyinUtils.js'
	
	export default {
		data() {
			return {
				list: [],
				indexKey:[],
				firstName: [],
				old: {},
				scrollTop: 0,
				hotCity: [],
				addressName:"",
				cityObj:{},
				listCopy:[],
				isSearch:false,//是否是搜索
			}
		},
		onLoad() {
			if(uni.getStorageSync('city')){
				this.cityObj=JSON.parse(uni.getStorageSync('city'))
				console.log(this.city)
			}
		},
		onShow() {
			let cityObj=new City();
			cityObj.getCity();
			let city=cityObj.arr;
			this.firstName = city.map((item) => {
				return item.initial
			})
			this.list =JSON.parse(JSON.stringify(city));
			this.listCopy =JSON.parse(JSON.stringify(city));
			console.log(city)
			this.hotCity=cityObj.hotCity;
			
			// console.log(PinyinUtils.chineseToPinYin('郑州市'))
			
		},
		methods: {
			select(item, index, cindex) {
			    console.log(item, index, cindex)
				uni.setStorageSync('cityChange', JSON.stringify(item));
				uni.switchTab({
				    url: '../index/index'
				});
			},
			getCity(item){//选择城市
				uni.setStorageSync('cityChange', JSON.stringify(item));
				uni.switchTab({
				    url: '../index/index'
				});
			},
			goHome(){
				uni.setStorageSync('cityChange', JSON.stringify(this.cityObj));
				uni.switchTab({
				    url: '../index/index'
				});
			},
			
			bindClick() {

			},
			goBack() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			scroll(e) {

				this.old.scrollTop = e.detail.scrollTop
			},
			getIndex(index) {
				let scrollTop = this.scrollTopList[index];
				this.scrollTop = scrollTop
			},
			searchData(key){
				if(key){
					this.isSearch=true;
					this.list=[];
					if(/^[a-zA-Z]*$/.test(key))
					{
					    // alert("“" + str + "”里全是字母！");
					    let arr=this.listCopy.filter((a)=>{
							return a.letter==key.toUpperCase()
						})
						
						this.list.push(...arr[0].data)
						
					}else if(/^[\u4e00-\u9fa5]*$/.test(key))
					{
					    // alert("“" + str + "”里全是汉字！");
						let arr=[]
						this.listCopy.forEach((a)=>{
							a.data.forEach((m)=>{
								if(m.city.indexOf(key)!=-1){
									
									arr.push(m)
								}
							})
						})
					
						this.list=JSON.parse(JSON.stringify(arr))
						
					}
				}else{
					this.isSearch=false;
					this.list=JSON.parse(JSON.stringify(this.listCopy))
				}
				
				
			}
		}
	}
</script>


<style lang="scss" scoped>
	@import '@/static/css/choseCity.scss'
</style>
